<template>
  <div>
    <div>
      <h4>Welcome! {{ userStore.userInfo.username }}</h4>
      <p><textarea v-model="state.commentText"></textarea></p>
      <p>
        <button @click="addComment(userStore.userInfo)">提交评论</button>
      </p>
    </div>
    <div>
      <ul>
        <CommentComp
          :data="state.commentTree"
          :user-info="userStore.userInfo"
          @add-reply="addReply"
        />
      </ul>
    </div>
  </div>
</template>

<script setup>
import CommentComp from './CommentComp';
import Comment from './Comment';
import useUserStore from '../store/user';

const userStore = useUserStore();
/**
 console.log(userStore);
 * Store {
 *   setUserInfo: (payload) => {…},
 *   userInfo: { id: 1, username: 'icy' }
 * }
 */

const { state, addReply, addComment } = new Comment({
  getterUrl: 'get_comment_list',
  setterUrl: 'set_comment_list',
});
</script>

